@charset "utf-8";
/* CSS Document */
html,body{height: 100%;}
body.login{background: #85d2c5;}
body.register{background: #fafafa;}
#wrap{display: -webkit-box; -webkit-box-orient: vertical; height: 100%;}
#header{display: -webkit-box; height: 50px; background: #fff; border-bottom: 1px solid #ddd; box-shadow: 1px 2px 3px #eee;}
#header .side{display: -webkit-box; padding: 0 5px; -webkit-box-pack: center; -webkit-box-align: center; width: 60px;}
#header .side span{padding: 5px 8px; border: 1px solid #eee; border-radius: 4px;}
#header .center{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-align: center;}
#header .center span{display: -webkit-box; height: 100%; width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-box-pack: center; font-size: 1.1em;}
#header .user{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-align: center;}
#header .user img{display: -webkit-box; width: 30px; height: 30px; border-radius: 50%; padding: 0 5px;}
#header .user span{display: -webkit-box; color: #27e; padding: 0 5px;}
/***********************************/
#pages{clear: both; padding: 10px; text-align: center; font-size: 0; letter-spacing: 0;}
#pages a,#pages span{display: inline-block; height: 32px; line-height: 32px; padding: 0 10px; border: 1px solid #ddd; margin-left: -1px; font-size: 16px;}
#pages span{background: #27e; border-color: #27e; color: #fff;}
#pages a:hover{background: #eee;}
#pages span:first-child,#pages a:last-child{border-radius: 0 4px 4px 0;}
#pages span:first-child,#pages a:first-child{border-radius: 4px 0 0 4px;}
#pages a.prev,#pages a.next{font-family: '\9ED1\4F53';}
/***************************/
#main{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-orient: vertical; overflow: auto;}
#none{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-orient: vertical;}
#none p{padding: 6px 0;}
#none p a{color: #27e; text-decoration: underline;}
#logo{display: -webkit-box; height: 120px;}
#form .rows{display: -webkit-box; padding: 10px 30px;}
#form .rows input.text{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border: none; background: #fff; padding: 12px 20px; border-radius: 50px;}
#form .rows input.sub{display: block; border: none; background: #27e; height: 50px; color: #fff; border-radius: 50px; font-size: 1.1em; width: 100%; padding: 0; letter-spacing: 6px;}
#form .rows.submit{padding-top: 40px;}
#main div.register{padding: 20px 0 0;}
#main div.register a{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-pack: center; -webkit-box-align: center; margin: 0 30px; border: 1px solid #fff; height: 50px; border-radius: 50px; color: #fff; font-size: 1.1em;}
/************************************/
#common-form .tips{font-size: 0.9em; color: #666; padding: 10px;}
#common-form .rows{display: -webkit-box; border-bottom: 1px solid #eee; padding: 0 10px; min-height: 52px; -webkit-box-align: center; background: #fff;}
#common-form .rows span.title{display: -webkit-box; width: 80px; color: #000; height: 52px; -webkit-box-align: center;}
#common-form .rows input.input,#common-form .rows div.input{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; outline: none; color: #666; height: 100%; -webkit-box-align: center; border: none; padding: 0; position: relative; height: 52px;}
#common-form .rows div.input.active{background: rgba(0,0,0,0.05);}
#common-form .rows input.num{font-weight: bold;}
#common-form .rows input.num::-webkit-input-placeholder{font-weight: normal;}
#common-form .rows div.input.active{background: rgba(0,0,0,0.02);}
#common-form .rows div.input select{position: absolute; top: 0; left: 0; bottom: 0; width: 100%; padding: 0; border: none; color: #666;}
#common-form .rows div.input a{display: -webkit-box; height: 100%; -webkit-box-align: center; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
#common-form .rows div.input span.checkbox{display: -webkit-box; position: relative; border: 1px solid #ddd; border-radius: 20px; height: 30px; width: 60px; background: #fff; transition: background 0.2s ease-in; -webkit-transition: background 0.2s ease-in;}
#common-form .rows div.input span.checked{background: #4cda60;}
#common-form .rows div.input span.checkbox:before{content:''; display: -webkit-box; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border: 1px solid #ddd; border-radius: 50%; background: #fff; transition: left 0.2s ease-in; -webkit-transition: left 0.2s ease-in;}
#common-form .rows div.input span.checked:before{left: 32px;}
#common-form .rows em.rg{display: -webkit-box; width: 20px; height: 20px; -webkit-box-pack: center; line-height: 22px; color: #898989; font-size: 1.1em;}
#common-form .rows i.get-code{display: -webkit-box; color: #27e;}
#common-form .rows i.disable{color: #ccc;}
#common-form .rows textarea{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border: none; resize: none; margin: 15px 0; overflow: hidden; height: 90px;}
#common-form div.sub{padding: 20px 10px;}
#common-form .sub input{width: 100%; height: 50px; background: #28a7e1; color: #fff; font-size: 1.1em; border-radius: 2px; border: none; letter-spacing: 6px; text-align: center;}
#common-form .sub input.disabled{background: #e2e2e2; color: #666;}
#common-form .reg-link{padding: 10px;}
#common-form .reg-link div{padding: 6px; border-bottom: 1px solid #eee; text-align: center; font-size: 1.1em; color: #f00;}
#common-form .reg-link p{font-size: 0.8em; color: #666; height: 34px; line-height: 34px; text-align: center;}
/******************************************/
#main .dashboard{padding: 10px 0; background: #f60; color: #fff;}
#main .dashboard .total{display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: center;}
#main .dashboard .total span{font-size: 0.9em; display: -webkit-box;}
#main .dashboard .total em{font-size: 1.6em; padding: 5px 0; display: -webkit-box;}
#main .dashboard .other{display: -webkit-box; padding-top: 10px;}
#main .dashboard .other div{position: relative; display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: 3%; -webkit-box-orient: vertical; -webkit-box-align: center;}
#main .dashboard .other div:after{content: ''; width: 1px; height: 28px; position: absolute; top: 15px; right: 0; background: #fff;}
#main .dashboard .other div:last-child:after{background: none;}
#main .dashboard .other span{display: -webkit-box; font-size: 0.8em;}
#main .dashboard .other em{display: -webkit-box; padding: 4px 0;}
/**************************************/
#main .controller{display: -webkit-box; -webkit-box-orient: vertical;}
#main .controller a{display: -webkit-box; padding: 5px; border-bottom: 1px solid #ddd;}
#main .controller i,#main .controller span,#main .controller em,#main .controller s{display: -webkit-box; text-decoration: none; height: 40px; -webkit-box-align: center;}
#main .controller a i{width: 40px; -webkit-box-pack: center; font-size: 1.4em;}
#main .controller a span{flex: 1; -webkit-box-flex: 1; -webkit-flex: 1;}
#main .controller a em{width: 40px; -webkit-box-pack: center; font-size: 1.2em; color: #666;}
#main .controller a s{color: #666;}
#main .make-cash{display: -webkit-box; background: #27e; color: #fff; border-radius: 2px; margin: 10px; height: 50px; -webkit-box-pack: center; -webkit-box-align: center; font-size: 1.1em;}
/*************************************************/
#boxes{overflow: hidden;}
#boxes:after{content: ''; display: block; visibility: hidden; clear: both;}
#boxes .box{float: left; width: 41%; padding-top: 41%; position: relative; margin: 6% 6% 0 0;}
#boxes .box:nth-child(odd){margin-left: 6%;}
#boxes .box div{position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;}
#boxes .box div span{font-size: 2.4em; color: #fff;}
#boxes .box div em{position: absolute; right: 0; bottom: 0; color: #fff; font-size: 0.9em; padding: 8px; height: 20px; line-height: 20px;}
#boxes .box div em:after{content: ''; position: absolute; top: -10px; left: 6px; width: 1px; height: 40px; background: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
#spread{display: -webkit-box; padding-top: 20px;}
#spread a{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-pack: center; -webkit-box-align: center; margin: 0 6%; border: 1px solid #ddd; border-radius: 2px; height: 45px;}
#links{display: -webkit-box; padding-top: 10px;}
#links a{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; height: 45px; border: 1px solid #ddd; border-radius: 5px; -webkit-box-pack: center; -webkit-box-align: center; margin-left: 6%;}
#links a:last-child{margin-right: 6%;}
/************************************/
#brand{position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); display: none;}
#brand .box{position: absolute; top: 10%; left: 10%; bottom: 10%; right: 10%; display: -webkit-box; background: #fff; -webkit-box-orient: vertical;}
#brand .box .title{display: -webkit-box; height: 40px; -webkit-box-pack: center; -webkit-box-align: center; border-bottom: 1px solid #ddd; color: #f00; font-size: 1.1em;}
#brand .box .brand{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; overflow: auto; -webkit-box-orient: vertical;}
#brand .box .brands{display: -webkit-box; height: 36px; border-bottom: 1px solid #eee; padding: 5px 8px; -webkit-box-align: center;}
#brand .box .brands:last-child{border-bottom: none;}
#brand .box .brands span{display: -webkit-box; width: 30px; background: #f00; color: #fff; height: 30px; -webkit-box-pack: center; -webkit-box-align: center; border-radius: 2px;}
#brand .box .brands em{display: -webkit-box; padding: 0 10px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #000;}
#brand .box .brands i{display: -webkit-box; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%;}
#brand .box .brands i:after{content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 6px;}
#brand .box .brands.selected i{border-color: #f00;}
#brand .box .brands.selected i:after{background: #f00;}
#brand .box .opration{padding: 10px; border-top: 1px solid #ddd;}
#brand .box .opration input{width: 100%; border: none; padding: 0; background: #27e; width: 100%; height: 46px; color: #fff; border-radius: 2px;}
/***************************/
#player{display: -webkit-box; height: 170px; -webkit-box-pack: end; -webkit-box-orient: vertical; position: relative; background: url(../images/bg.jpg) no-repeat; background-size: cover;}
#player a.history{position: absolute; top: 8px; left: 8px; width: 50px; height: 30px; border: 1px solid #fff; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; font-size: 0.8em; color: #fff;}
#player h1{font-size: 1.2em; font-weight: normal; padding: 0 10px; color: #f00;}
#player p{font-size: 0.8em; padding: 10px; color: #E25400;}
#player .tools{display: -webkit-box; background: rgba(0,0,0,0.4);}
#player .tools a{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #fff; height: 45px; -webkit-box-pack: center; -webkit-box-align: center; border-left: 1px solid #fff;}
#player .tools a:first-child{border: none;}
/***************************************/
#play li{display: -webkit-box; padding: 5px; border-bottom: 1px solid #eee;}
#play li:last-child{border-bottom: none;}
#play li.played{background: #f2f2f2;}
#play li .num{display: -webkit-box; width: 30px; -webkit-box-pack: center; -webkit-box-align: center; font-size: 1.1em; color: #666;}
#play li .cover{display: -webkit-box; width: 50px; height: 50px; overflow: hidden;}
#play li .cover img{width: 100%; height: 100%;}
#play li .info{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-orient: vertical; padding: 0 5px;}
#play li .info h2{font-weight: normal; font-size: 1.1em; height: 30px;}
#play li .info p{font-size: 0.8em; display: -webkit-box; height: 20px; -webkit-box-align: end;}
#play li .play{display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;}
#play li .play span{display: block; width: 30px; height: 30px; border: 1px solid #eee; border-radius: 50%; background: url(../images/play_icon.png) 0px 0px no-repeat;}
#play li.played .play span{border-color: #28a7e1; background-position: -30px -30px;}
/***************************************/
#pay{display: -webkit-box; -webkit-box-pack: center; padding: 5px; border-top: 1px solid #ddd;}
#pay span{display: -webkit-box; width: 86%; height: 40px; -webkit-box-align: center; -webkit-box-pack: center; background: #28a7e1; border-radius: 2px; color: #fff;}
/*************************************/
#pays{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none;}
#pays .box{position: fixed; bottom: -280px; right: 0; left: 0; background: #fff; display: -webkit-box; -webkit-box-orient: vertical; height: 280px; -webkit-transition: bottom 0.2s linear;}
#pays .box.show{bottom: 0;}
#pays .box .title{display: -webkit-box; padding:0 8px; height: 50px; -webkit-box-align: center; border-bottom: 1px solid #ddd;}
#pays .box .title span{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
#pays .box .option{display: -webkit-box;}
#pays .box .option div{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-pack: center; -webkit-box-align: center; border: 1px solid #eee; height: 40px; margin: 10px 10px 10px 0; border-radius: 4px; position: relative; overflow: hidden;}
#pays .box .option div:first-child{margin-left: 10px;}
#pays .box .option div span{font-size: 1.2em; color: #f00;}
#pays .box .option div i,#pays .box .option div em{font-size: 0.75em; color: #666; padding: 0 2px;}
#pays .box .option div.selected{border-color: #dd0010;}
#pays .box .option div.selected .rg-check{background: #dd0010;}
#pays .box .phone{padding: 5px 10px 10px; position: relative;}
#pays .box .phone div{margin-right: 110px; padding: 10px; border: 1px solid #ccc; border-radius: 4px;}
#pays .box .phone div input{display: block; width: 100%; height: 20px; line-height: 20px; border: none; font-size: 18px; padding: 0;}
#pays .box .phone div input::-webkit-input-placeholder{font-size: 14px;}
#pays .box .phone input.btn{position: absolute; top: 5px; right: 10px; border-radius: 4px; border: none; background: #f60; color: #fff; width: 100px; height: 42px;}
#pays .box .tips{display: -webkit-box; -webkit-box-align: center; font-size: 0.8em; color: #f00; padding: 10px;}
#pays .payment{display: -webkit-box; padding-bottom: 10px;}
#pays .payment div{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; height: 40px; border: 1px solid #eee; -webkit-box-pack: center; -webkit-box-align: center; width:1%; margin: 0 10px; position: relative; overflow: hidden; border-radius: 3px; background: url(../images/weixinpay.jpg) center no-repeat;}
#pays .payment div.alipay{background: url(../images/alipay.jpg) center no-repeat;}
#pays .box .rg-check{color: #fff; background: #fff; position: absolute; top: -16px; left: -10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 26px; height: 36px;}
#pays .box .rg-check:before{-webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; bottom: 8px; right: -2px;}
#pays .payment div.selected{border-color: #272; color: #272;}
#pays .payment div.selected .rg-check{background: #272;}
/*************************************/
#main .sort{display: -webkit-box; margin: 10px; border: 1px solid #27e; border-radius: 8px; overflow: hidden; position: relative;}
#main .sort a,#main .sort span{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; height: 40px; -webkit-box-pack: center; -webkit-box-align: center;}
#main .sort em{display: -webkit-box; height: 40px; width: 1px; background: #27e;}
#main .sort span{background: #27e; color: #fff;}
#main .sort select{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border: none; border-right: 1px solid #27e; height: 44px;}
#main .sort i{display: -webkit-box; width: 44px; height: 44px; -webkit-box-pack: center; -webkit-box-align: center; color: #fff; background: #27e;}
#main .sort input.btn{position: absolute; top: 0; right: 0; bottom: 0; width: 44px; border: none; opacity: 0;}
/**************************/
#record li{display: -webkit-box; padding: 6px; border-bottom: 1px solid #ddd;}
#record li .cover{display: -webkit-box; width: 50px; height: 50px; overflow: hidden;}
#record li .cover img{width: 100%; height: 100%;}
#record li .info{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-orient: vertical; padding-left: 10px;}
#record li .info p{display: -webkit-box; height: 26px;}
#record li .info p i{font-size: 1.1em; overflow: hidden; white-space: nowrap;}
#record li .info p s{font-size: 0.9em; color: #333; text-decoration: none;}
#record li .info p span{font-size: 1.2em; color: #f00;}
#record li .info p  em{font-size: 0.8em; color: #666; padding: 0 6px;}
#record li .tips{display: -webkit-box; -webkit-box-orient: vertical;}
#record li .tips p{display: -webkit-box; -webkit-box-pack: end; height: 26px;}
#record li .tips p i{font-size: 0.8em; color: #666;}
#record li .tips p em{font-size: 0.9em; color: #666; padding: 0 4px;}
#record li .tips p span{font-size: 1.1em; color: #f00;}
/******************************/
#log li{display: -webkit-box; padding: 10px 10px; border-bottom: 1px solid #ddd; -webkit-box-orient: vertical;}
#log li h2{display: -webkit-box; font-weight: normal; height: 28px; font-size: 1em;}
#log li h2 i{font-size: 0.8em; color: #333; padding: 0 4px;}
#log li h2 em{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-pack: end; font-size: 1.3em; color: #f60;}
#log li p{display: -webkit-box; font-size: 0.8em; color: #666;}
#log li p span{display: -webkit-box;}
#log li p em{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-pack: end;}
/****************************************/
#parter li{display: -webkit-box; padding: 8px; border-bottom: 1px solid #ddd;}
#parter li .head{display: -webkit-box; width: 50px; height: 50px; overflow: hidden; padding-right: 10px;}
#parter li .info{display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
#parter li .info h3{font-weight: normal; display: -webkit-box; font-size: 0.8em; padding-bottom: 5px;}
#parter li .info h3 span{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; font-size: 1.5em;}
#parter li .info p{font-size: 0.9em; color: #666;}
/******************************/
#main .brand-search{position: relative; display: -webkit-box; border: 1px solid #ddd; background: #fff; margin: 5px 0 0 10px; padding-left: 10px; border-radius: 20px; overflow: hidden;}
#main .brand-search input{display: -webkit-box; -webkit-box-flex: 1; border: none; background: none; height: 40px; padding: 0; outline: none; position: relative; z-index: 3;}
#main .brand-search span{position: absolute; top: 0; right: 0; height: 40px; width: 40px; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; color: #27e; font-size: 1.2em; z-index: 2;}
#main .brands.sidenav{padding-right: 30px;}
#main .brands dl dt,#main .brands .brand-title{font-size: 1.1em; font-weight: normal; height: 44px; line-height: 44px; padding: 0 12px; border-bottom: 1px solid #eee; color: #dd0010; clear: both;}
#main .brands .brand-title{border-bottom: none;}
#main .brands .hot-box{overflow: hidden;}
#main .brands .hot-box li{width: 20%; padding-top: 20%; position: relative; background: #eee; float: left;}
#main .brands .hot-box li a{position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; color: #fff;}
#main .brands .hot-box li a span{display: -webkit-box; padding: 4px 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-pack: center;}
#main .brands .hot-box li a em{display: -webkit-box; font-size: 0.75em;}
#main .brands dl dd{display: -webkit-box; padding: 0 12px; height: 50px; border-bottom: 1px solid #eee; background: #fff;}
#main .brands dl dd a{position: relative; display: -webkit-box; -webkit-box-orient: vertical; width: 100%; height: 100%;}
#main .brands dl dd a span{display: -webkit-box; color: #000; font-size: 1.05em; height: 30px; -webkit-box-align: center;}
#main .brands dl dd a em{display: -webkit-box; font-size: 0.8em; color: #666;}
#main .brands dl dd a i{position: absolute; top: 0; right: 0; bottom: 0; display: -webkit-box; -webkit-box-align: center; color: #ccc; font-size: 1.2em;}
#main .brands dl dd a s{color: #272; text-decoration: none; font-style: normal;}
#main .brand-chars{position: fixed; top: 50px; right: 0; bottom: 0; width: 28px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
#main .brand-chars a{display: -webkit-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-pack: center; -webkit-box-align: center; font-size: 0.9em;}
#onchar{position: fixed; top: 50%; left: 50%; background: rgba(0,0,0,0.5); color: #fff; display: -webkit-box; width: 80px; height: 80px; -webkit-box-pack: center; -webkit-box-align: center; margin-top: -40px; margin-left: -40px; border-radius: 6px; font-size: 1.8em; opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s;}
#onchar.show{opacity: 1;}

